{{define "/chat/createcom.shtml"}}
<!DOCTYPE html>
<html>
<head>
{{template "/chat/head.shtml"}}
    <style>
        .area {
            margin: 20px auto 0px auto;
        }
        .mui-input-group:first-child {
            margin-top: 20px;
        }
        .mui-input-group label {
            width: 22%;
        }
        .mui-input-row label~input,
        .mui-input-row label~select,
        .mui-input-row label~textarea {
            width: 78%;
        }
        .mui-checkbox input[type=checkbox],
        .mui-radio input[type=radio] {
            top: 6px;
        }
        .mui-content-padded {
            margin-top: 25px;
        }
        .mui-btn {
            padding: 10px;
        }

    </style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">创建群</h1>
</header>
<div class="mui-content" id="pageapp">
    <ul class="mui-table-view mui-table-view-chevron">
        <li class="mui-table-view-cell mui-media">
            <a  class="mui-navigate-right">
                <input style="width: 100%;height: 48px;position: absolute;opacity:0;" onchange="uploadthis(this)"  accept="image/png,image/jpeg" type="file" class="mui-input-clear mui-input" placeholder="请输入群名称">

                <img id="head-img" :src="com.icon" style="border-radius:50%;" class="mui-media-object mui-pull-right head-img">
                <div class="mui-media-body">
                头像
                <p class="mui-ellipsis">点击右侧上传头像</p></div>
    </a>
    </li>
    </ul>

        <div class="mui-input-group">


            <div class="mui-input-row">
                <label>类型</label>
                <select v-model="com.cate" class="mui-input-clear mui-input">
                    <option value="0">默认</option>
                    <option value="1">兴趣爱好</option>
                    <option value="2">行业交流</option>
                    <option value="3">生活休闲</option>
                    <option value="4">学习考试</option>
                </select>
            </div>
            <div class="mui-input-row">
                <label>名称</label>
                <input v-model="com.name" id='mobile' type="text" class="mui-input-clear mui-input" placeholder="请输入群名称">
            </div>
            <div class="mui-input-row">
                <label>介绍</label>
                <textarea v-model="com.memo" id="textarea" rows="3" placeholder="群描述"></textarea>
            </div>


        </div>
        <div class="mui-content-padded">
            <button @click="createcommunity" id='reg' class="mui-btn mui-btn-block mui-btn-primary">确认</button>
        </div>

</div>
</body>
</html>
<script>
    function uploadthis(dom){
        var data = new FormData();

        for(let file of dom.files){
            data.append('file',file);
        }

        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 && xhr.status==200){

                var res = JSON.parse(xhr.responseText);
                if(res.code!=0){
                    mui.toast(res.msg)
                }else{
                    app.com.icon = res.data;
                    mui.toast("上传成功")
                }

            }
        };
        xhr.open('POST','/attach/upload');
        xhr.send(data)
        }
    var app=new Vue(
            {
                el:"#pageapp",
                data:{
                    com:{
                        name:"",
                        cate:0,
                        memo:"",
                        icon:"/asset/images/community.png",
                        ownerid:0
                    },

                },
                created:function(){
                  this.com.ownerid=userId();
                },
                methods:{
                    createcommunity:function(){
                        if(!this.com.name){
                            mui.toast("请填写名称")
                            return
                        }

                        let data = LocalStore.getTokenInfo();
                        console.log(data)
                        this.com.ownerid = data.userId;

                        post("contact/createcommunity",this.com ,function(res){
                            if(res.code==0){
                                mui.toast("创建成功");
                            }else{
                                mui.toast(res.msg);
                            }
                        })
                    },

                }
            }
    )
</script>
{{end}}